@extends('public.mfather')
@section('content')
    <div class="main">
        <div class="left">
            <img src="{{$shop->dianzhao}}" alt="" />
        </div>
        <div class="right">
            <img src="{{$shop->ewm}}" alt="" />
        </div>
    </div>
    <div class="con">
        <p>✪ {{$shop->name}}</p>
        <div class="con_con">
            <span class="title">经营范围：</span>
            <span class="xq">{{$shop->run}}</span>
        </div>
        <div class="con_con">
            <span class="title">简　　介：</span>
            <span class="xq">{{$shop->introduct}}</span>
        </div>
        <div class="con_con">
            <span class="title">地　　址：</span>
            <span class="xq">{{$shop->address}}</span>
        </div>
        <div class="con_con">
            <span class="title">联系电话：</span>
            <span class="xq"><a href="tel:{{$shop->phone}}">{{$shop->phone}}</a></span>
        </div>
    </div>
    <div class="zhanshi">
        @foreach($imgs as $img)
        <img src="{{$img['src']}}" alt="" />
            @endforeach
    </div>
    <div style="box-sizing: border-box;width:93%;height:100vw;margin:0px auto;border:0.5vw solid #eee;border-radius: 1vw;padding:1vw;">
        <div id="container" style="width:100%;height:100%;">

        </div>
    </div>
    <div style="margin:1vw auto;width:93%;height:12vw;background:#02a1e9;border:none;color:white;text-align:center;line-height:12vw;border-radius:7px;" onclick="daohang()">导航到店铺</div>
    @endsection
@section('scripts')
        <script type="text/javascript">
            //获取店铺位置
        var p='{{$shop->position}}';
        var p=p.split(",");
        var x=p[0];
        var y=p[1];
        var map = new BMap.Map("container");
        var point = new BMap.Point(x,y);
        var point2;
        map.centerAndZoom(point, 16);
        map.enableScrollWheelZoom();
            // 添加带有定位的导航控件
            var navigationControl = new BMap.NavigationControl({
                // 靠左上角位置
                anchor: BMAP_ANCHOR_TOP_LEFT,
                // LARGE类型
                type: BMAP_NAVIGATION_CONTROL_LARGE,
                // 启用显示定位
                enableGeolocation: true
            });
            map.addControl(navigationControl);
            var geolocationControl = new BMap.GeolocationControl();
            geolocationControl.addEventListener("locationError",function(e){
                // 定位失败事件
                alert(e.message);
            });
            map.addControl(geolocationControl);
        // 标注店铺
        var myIcon = new BMap.Icon("http://klw.lujiancai.cn/images/shop.png",new BMap.Size(20,20),{
            anchor: new BMap.Size(10,10)
        });
        var marker=new BMap.Marker(point,{icon: myIcon});
        map.addOverlay(marker);
        //获取当前手机位置
        var geolocation = new BMap.Geolocation();
            var latCurrent;
            var lngCurrent;
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                point2=mk;
                map.addOverlay(mk);
                //map.panTo(r.point);//地图中心点移到当前位置
                latCurrent = r.point.lat;
                lngCurrent = r.point.lng;
            }
            else {
                alert('failed'+this.getStatus());
            }
        },{enableHighAccuracy: true});
        map.addOverlay(marker);
        var licontent="<b>{{$shop->name}}</b><br>";
        licontent+="<span><strong>地址：</strong>{{$shop->address}}</span><br>";
        licontent+="<span><strong>电话：</strong>{{$shop->phone}}</span><br>";
        var opts = {
            width : 200,
            height: 100,
        };
        var infoWindow = new BMap.InfoWindow(licontent, opts);
        marker.openInfoWindow(infoWindow);
        marker.addEventListener('click',function(){
            marker.openInfoWindow(infoWindow);
        });
        function daohang(){
            location.href="http://api.map.baidu.com/direction?origin="+latCurrent+","+lngCurrent+"&destination="+y+","+x+"&mode=driving&region=北京&output=html";
        }
    </script>
@endsection